<template>
  <div>
      <p>hello</p>
      <button v-for="item in list" :key="item">{{item}}</button>
      <hr>
      <button @click="getData">发请求</button>
      <hr>
      <!-- <router-link to="/geturlval?ss=234&sff=1e3re">去参数页</router-link> -->
      <router-link :to="{
          path: '/geturlval',
          query: {aa: 11, bb:22}
      }">去参数页</router-link>
      <br>
      <button @click="change">去参数页</button>
      <button @click="changByName">通过name跳转</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            list: [1,2,3,4]
        }
    },
    // 进入路由前-组件内的守卫 有点像生命周期
    beforeRouteEnter(to, from, next) {
        console.log(123);
        next()
    },
    methods: {
        getData() {
            // 接口地址前面不要写死 不然就是固定的地址
            // 如果接口前没有加域名协议等 就会用当前页面的地址
            this.http('/play/category')
                .then(res => {
                    console.log(res);
                })
        },
        change(){
            this.$router.push({
                path: '/geturlval',
                query: {
                    age: 18,
                    nn: 234,
                    egfsaf:'9283uih'
                }
            })
        },
        changByName() {
            this.$router.push({
                // 命名路由--当path比较长或者不方便拼写时 可以用name代替path
                name: 'xxx'
            })
        }
    }
}
</script>

<style>

</style>